<script>
import { mapGetters } from 'vuex'
export default {
  name: "Tabbar",
  props: {
    path: {
      type: String,
      default: ''
    },
  },
  computed: {
    ...mapGetters(['token'])
  },
  data() {
    return {
      tabbarList: [
        {
          "iconPath": "/static/tabbar/home.png",
          "pagePath": "pages/home/index",
          "selectedIconPath": "/static/tabbar/home_active.png",
          "text": "首页"
        },
        {
          "iconPath": "/static/tabbar/map.png",
          "pagePath": "pages/map/index",
          "selectedIconPath": "/static/tabbar/map_active.png",
          "text": "地图"
        },
        {
          "iconPath": "/static/tabbar/qcode.png",
          "selectedIconPath": "/static/tabbar/qcode.png",
          "text": "充电",
          "midButton": true
        },
        {
          "iconPath": "/static/tabbar/order.png",
          "pagePath": "pages/order/index",
          "selectedIconPath": "/static/tabbar/order_active.png",
          "text": "订单"
        },
        {
          "iconPath": "/static/tabbar/user.png",
          "pagePath": "pages/my/index",
          "selectedIconPath": "/static/tabbar/user_active.png",
          "text": "我的"
        }
      ]
    }
  },
  methods: {
    changeTabBar(index) {
      console.log('index',index)
      if (index === 2) {
        this.handleScan()
        return
      }
      let path = this.tabbarList[index].pagePath
      uni.switchTab({
        url: '/' + path
      })
    },
    handleScan() {
      // 调用扫码API
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ['qrCode'],
        success: (res) => {
          console.log('扫码结果：', res)
          if (!res.path) {
            uni.showToast({
              title: '无效的二维码',
              icon: 'none'
            })
          } else {
            uni.navigateTo({
              url: '/' + res.path
            })
          }
        },
        fail: (err) => {
          console.log('扫码失败：', err)
          if (err.errMsg.includes('cancel')) {
            return
          }
          uni.showToast({
            title: '扫码失败',
            icon: 'none'
          })
        }
      })
    }
  },
}
</script>

<template>
  <u-tabbar
    height="100rpx"
    :hide-tab-bar="true"
    mid-button
    mid-button-size="140rpx"
    active-color="#04C8AE"
    in-active-coloir="#F2F2F2"
    :list="tabbarList"
    @change="changeTabBar"
  ></u-tabbar>
</template>

<style scoped lang="scss">
</style>
